<template>
  <div class="entrySchoolForm">
    <div class="form-operate">
      <!--<div class="form-filter">
        <div class="form-filter-search">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="search"
          >
          </el-input>
          <el-button type="primary" v-on:click="searchTable">搜索</el-button>
        </div>
      </div>-->
      <div class="operate-right">
        <el-button type="success" v-on:click="manyStateUpdate">新增</el-button>
        <!--<el-button type="warning " v-on:click="manyRowDelete">批量删除</el-button>-->
      </div>
    </div>
    <div class="huadi-table">
      <el-table
        v-loading=""
        ref="multipleTable"
        tooltip-effect="dark"
        :data="ctableData"
        @select="tableSelection"
        @select-all="tableAllSelection"
        :header-row-style=headerStyle
        style="width: 100%">
        <el-table-column
          header-align="center"
          type="selection"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="password"
          header-align="center"
          label="密码">
        </el-table-column>
        <el-table-column
          prop="auth"
          header-align="center"
          label="权限">
        </el-table-column>
        <el-table-column
          prop="islocking"
          header-align="center"
          label="是否锁定">
        </el-table-column>
        <el-table-column
          width="200"
          header-align="center"
          label="操作">
          <template slot-scope="scope">
            <!--<el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)">查看
            </el-button>-->
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)">修改
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total=page.total
        :pageSize=page.pageSize
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'UserForm',
    data () {
      return {
          tableSelect:[],
          filter:-1,
          search:"",
        headerStyle: {
          "background-color": '#f5f6fa',
        },
        page: {
          total: 0,
          pageIndex: 0,
          pageSize: 10
        },
        dialogFormState: false,
        dialogFormStateAll:false,
        stateform: {
          id: '',
          state: 0,
          memo: '',
          // false 为不是批量的，true 为批量
          type:false
        },
        tableData: [],
        form: {
          selector: ""
        },
        loading: true
      }
    },
    methods: {
      handleDelete(row){
        this.$http.get('/employee/delete?id='+row.id).then(response => {
          if(response.bodyText=='true'){
            this.pageUtil();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      manyStateUpdate(){
        this.$store.commit('clearUser');
        this.$router.push('/UserEdit');

      },
      tableAllSelection(selection){
            this.tableSelect=selection;
      },
      tableSelection(selection,row){
            this.tableSelect=selection;
      },
      filterChanger(){
        this.page.pageIndex=0;
          this.pageUtil();
      },
        searchTable(){
          this.page.pageIndex=0;
            this.pageUtil();
        },
       manyRowDelete (){
        if(this.tableSelect.length==0){
          this.$notify({
              title: '提示',
              message: '请选择要删除的单据',
              type: 'warning'
            });
          return;
        }
        var newArr=[];
        this.tableSelect.forEach(item => {
          newArr.push(item.id);
        })
        this.$http.get('/employee/delete?id='+newArr.join(',')).then(response => {
          if(response.bodyText=='true'){
            this.tableSelect=[];
            this.pageUtil();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      handleEdit(row,index){
        this.$store.commit('userUpdate',row);
        this.$router.push('/UserEdit');
      },
        pageUtil(){
          this.$http.get('/employee/QueryPage?page='+this.page.pageIndex+'&pageSize='+this.page.pageSize).then(response => {

            this.tableData = response.body.data;
            console.log(this.tableData);
            this.page.total=response.body.total;

          }, response => {
            this.$message('网络错误');
          });
      },
      handleCurrentChange(val) {
          this.page.pageIndex=val-1;
          this.pageUtil();
      },
      UpdateStateByIdAll(){
        var arr=[];
        for(var index=0;index<this.tableSelect.length;index++){
            var item={
                id:this.tableSelect[index].id,
                state:this.stateform.state,
                memo:this.stateform.memo
            }
            arr.push(item);
        }
        this.$http.post('/Hd-NurseryShool/enroll/UpdateStateById',{paramsModels:arr}).then(response => {
          if(response.bodyText=='success'){
            this.pageUtil();
            this.dialogFormStateAll=false;
            this.$refs.multipleTable.clearSelection();
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      UpdateStateById(){
          var arr=[];
            arr.push(this.stateform)
        this.$http.post('/Hd-NurseryShool/enroll/UpdateStateById',{paramsModels:arr}).then(response => {
            if(response.bodyText=='success'){
                this.stateform.type=false;
                this.dialogFormState=false;
                this.$refs.multipleTable.clearSelection();
                this.pageUtil();
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success'
              });
            }
        }, response => {
          this.$message('网络错误');
        });
      }
    },
    computed: {
      ctableData(){
        for (let index = 0; index < this.tableData.length; index++) {
              this.tableData[index].birthday=new Date(this.tableData[index].birthday).pattern('yyyy-MM-dd');
              this.tableData[index].entyday=new Date(this.tableData[index].entyday).pattern('yyyy-MM-dd');
              try{
                  if(this.tableData[index].auth==='1'){
                      this.tableData[index]['auth']='否';
                  }else{
                    this.tableData[index]['auth']='是';
                  }
                  if(this.tableData[index].islocking==='1'){
                    this.tableData[index]['islocking']='否';
                  }else{
                    this.tableData[index]['islocking']='是';
                  }
              }catch (e){
                this.tableData[index]['auth']='否';
                this.tableData[index]['islocking']='否';
              }
        }
        this.loading = false;

        return this.tableData;
      }
    },
    created(){
        this.page.pageIndex=0;
      this.pageUtil();
      this.$store.commit("update", [{name: '基础信息', router: '/'}, {name: '用户管理', router: '/EntrySchoolForm'}]);
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .pagination, el-pagination {
    margin-top: 24px;
    width: 500px;
    padding: 0px !important;
  }

  .huadi-table {
    margin-top: 25px;
    text-align: center;
  }

  .operate-right {
    width: 200px;
    /*width:300px;*/
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: -50px;
  }
  .marginDia{
    height:20px;
    width:100%;
  }

  .stata-dialog > .form-item{
    margin-top:20px;
  }
  .form-filter-search{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .el-input {
    width: 200px;
    margin-right:10px;
  }

  .entrySchoolForm {
    width: 100%;
    heigth: 100%;
    background: #eaedf1;
  }

  .form-operate {
    height: 70px;
    width: 100%;
    border-radius: 3px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form-filter {
    height: 100%;
    padding-left: 10px;
    width: 550px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .form-filter-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }

</style>
